import { memo, useEffect, useState } from "react";
import styles from "./typeBookList.module.scss";
import Top from "../../components/top/Top";
import ToHome from "../../components/toHome/ToHome";
import { sift } from "../../Api";
import { useParams, useNavigate } from "react-router-dom";
import { InfiniteScroll } from "antd-mobile";

let t = ["0-1岁", "1-2岁", "2-3岁", "3-4岁", "4-6岁", "6岁以上"];

let parameter = {
  perpage: 10,
  goods_type: "1",
  goods_position: "0",
  attr_val_id: "",
  tag_id: "",
};

let TypeBookList: React.FC = () => {
  let to = useNavigate();
  let { id, type } = useParams();

  let [dataList, setDateList] = useState<Obj[]>([]);
  let [hasMore, setHasMore] = useState<boolean>(true);
  let data = async () => {
    if (t.includes(type!)) {
      parameter = { ...parameter, attr_val_id: id!, tag_id: "" };
    } else {
      parameter = { ...parameter, attr_val_id: "", tag_id: id! };
    }
    let { data } = await sift(parameter);
    // console.log(data);
    setDateList((val) => [...val, ...data.data.list]);
    parameter = { ...parameter, goods_position: String(Number(parameter.goods_position) + 10) };
  };

  return (
    <>
      <ToHome />
      <Top title={type! + " 书单"} />
      <ul className={styles.box}>
        {dataList.map((item) => (
          <li key={item.goods_id} onClick={() => to(`/bookdetails/${item.goods_id}`)}>
            <img src={item.goods_thumb} alt="" />
            <div className={styles.tex}>
              <h3>{item.goods_name}</h3>
              <p>{item.expert_info.expert_introduction}</p>
              {item.label_list.length > 0 && (
                <div className={styles.mold}>
                  {item.label_list.splice(0, 3).map((datas: Obj) => (
                    <span key={datas.id}>{datas.label_name}</span>
                  ))}
                </div>
              )}
            </div>
          </li>
        ))}
        <InfiniteScroll loadMore={data} hasMore={hasMore} />
      </ul>
    </>
  );
};
export default memo(TypeBookList);
